<template>
  <div class="container">
    <div id="map"></div>
    <div id="chart"></div>
    <div id="chart2"></div>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <div class="weather-popup" id="weatherPopup" >
        <div class="weather-popup-header">天气预报</div>

        <!-- 天气信息主体 -->
        <div class="weather-info" >
          <div class="city-week">
            <span class="label city-label">城市：</span>
            <span class="value city-value">{{ weather.city }}</span>
          </div>

          <div class="weather-condition">
            <span class="label week-label">星期：</span>
            <span class="value week-value">{{ weather.week }}</span>
          </div>

          <div class="weather-condition">
            <span class="label wea-label">天气：</span>
            <span class="value wea-value">{{ weather.wea }}</span>
          </div>

          <div class="temperature">
            <span class="label temp-label">温度：</span>
            <span class="value temp-value">{{ weather.tem }}℃</span>
          </div>

          <div class="wind">
            <span class="label win-label">风向：</span>
            <span class="value win-value">{{ weather.win }}</span>
          </div>

          <div class="wind-speed">
            <span class="label wind-speed-label">pm2.5：</span>
            <span class="value wind-speed-value">{{ weather.airPm25 }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入相关地图JSON数据
import Nmg from "@/assets/map/nmg.json";
import Als from "@/assets/map/als.json";
import Bt from "@/assets/map/bt.json";
import Bynr from "@/assets/map/bynr.json";
import Cf from "@/assets/map/cf.json";
import Eeds from "@/assets/map/eeds.json";
import Hhht from "@/assets/map/hhht.json";
import Hlbr from "@/assets/map/hlbr.json";
import Tl from "@/assets/map/tl.json";
import Wh from "@/assets/map/wh.json";
import Wlcb from "@/assets/map/wlcb.json";
import Xam from "@/assets/map/xam.json";
import Xlgl from "@/assets/map/xlgl.json";

import axios from "axios";
import {todayWeather, getAllWeather, getLineData, getTotal} from "@/api/business/weather";
import {listShop} from "@/api/business/shop";

export default {
  name: "Index",
  data() {
    return {
      mapData: Nmg, //指定默认加载的地图信息
      weather: {},
      open:false,
      title:null,
      cityMap: {
        内蒙古自治区: Nmg,
        呼和浩特市: Hhht,
        阿拉善盟: Als,
        巴彦淖尔市: Bynr,
        赤峰市: Cf,
        鄂尔多斯市: Eeds,
        呼伦贝尔市: Hlbr,
        通辽市: Tl,
        乌海市: Wh,
        乌兰察布市: Wlcb,
        兴安盟: Xam,
        锡林郭勒盟: Xlgl,
        包头市: Bt,

      },
      // 数据可以由后台动态传入但是name要和cityMap里面的key相同才能对应上
      // 这里手动添加了部分数据，在echarts上会出现部分效果因为没有数据导致的显示问题
      cityData: [],
      chartList: [],
      chartXData: [],
      chartData: {},
      barData: {},
      barList: [],
    };
  },
  created() {
    this.$nextTick(() => {
      // 使用vue.$nextTick()方法可以在dom数据更新后延迟执行
      this.handleData();
    });
    this.getList()
    this.openD();
  },
  methods: {
    /** 查询今日天气 */
    getList() {
      this.loading = true;
      todayWeather().then(response => {
        console.log(response, '今日天气')
        this.weather = response;
      });
    },
    openD() {
        this.open = true;

     // this.title = "天气预报";
    },
    handleData() {
      // 处理数据
      getLineData().then(res => {
        this.chartList = res;
      })
      // 处理数据
      getAllWeather().then(res => {
        this.cityData = res;
        res.map((item) => {
          item.name = item.city
        })
        console.log(this.cityData, '处理后的数据')
        this.initMap();
      })
    },
    initMap() {
      // 注册可用地图，地图数据格式为json
      // 第一个代表地区名称，第二个代表地区geoJson数据
      this.$echarts.registerMap(name, this.mapData);
      // 创建一个echarts实例
      let myChart = this.$echarts.init(document.getElementById("map"));
      myChart.showLoading();
      let option = {
        tooltip: {
          //提示框组件
          triggerOn: 'none', // 关闭默认的mouseover调用
          trigger: "item", //数据项图形触发
          enterable: true, // 设置可移入气泡
          confine:true, // 将 tooltip 框限制在图表的区域内
          transitionDuration: 0,  // 让toolltip紧跟鼠标
          formatter: (params) => {
            //自定义提示框内容样式
            if (params.data) {
              const data = params.data;

              return `
              <div style="width: 400px;padding: 8px;box-sizing: border-box; white-space: normal">
                <h3 style="margin-top: 0 ">${data.name}</h3>
                <div>
                  <p style="margin: 0">天气状况：<span style="color: #fdba34;">${data.wea}</span></p>
                  <p style="margin: 0">温度：<span style="color: #fdba34;">${data.tem1}℃ — ${data.tem2}℃</span></p>
                  <p style="margin: 0">
                    <span>风向：<span style="color: #fdba34;">${data.win}</span></span>
                    <span>风力：<span style="color: #fdba34;">${data.winSpeed}</span></span>
                    <span>风速：<span style="color: #fdba34;">${data.winSpeed}</span></span>
                  </p>
                  <p style="margin: 0">降雨量：<span style="color: #fdba34;">${data.rainPcpn}</span></p>
                  <p style="margin: 0">湿度：<span style="color: #fdba34;">${data.humidity}</span></p>
                  <p style="margin: 0">PM2.5：<span style="color: #fdba34;">${data.airPm25}</span></p>
                  <p style="margin: 0;">空气质量提示：<span style="color: #fdba34;">${data.airTips}</span></p>
                  ${JSON.parse(data.alarm).length > 0
                ? `
                      <p style="margin: 0">
                        预警信息：<span style="margin: 0;color: #ff4949;">${JSON.parse(data.alarm)[0].alarm_title}</span>
                        <p style="margin: 0;color: #ff4949;">${JSON.parse(data.alarm)[0].alarm_content}</p>
                      </p>`
                : ''
              }
                  ${data.website != null
                ? `
                      <p style="margin: 0">
                      官网政策：<a href="${data.website}" target="_blank" style="color: #fdba34;">${data.website}</a>
                      </p>`
                : ''
              }
                </div>
              </div>`
            }
          },
          backgroundColor: "rgba(68,134,224,0.9)",
        },
        geo: {
          //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          zoom: 1, //默认视角的缩放比例
          roam: true, //是否开启平移和缩放，可单独开启
          top: 'center',
          left: '100',
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1,
            max: 4,
          },

          itemStyle: {
            //地图色彩设置
            areaColor: "#24CFF4",
            borderColor: "#53D9FF",
            borderWidth: 1.3,
            shadowBlur: 15,
            shadowColor: "rgb(58,115,192)",
            shadowOffsetX: 7,
            shadowOffsetY: 6
          },
          emphasis: {
            //高亮状态下的多边形和标签样式。
            itemStyle: {
              areaColor: "#8dd7fc",//高亮状态下的地图区域的背景色
              borderWidth: 1.6,
              shadowBlur: 25
            },
          },
          label: {
            // 标签的显示
            //就是地区名的样式
            normal: {show: true, color: "#fff"},
            emphasis: {show: true, color: "#fff"},
          },
        },
        series: [
          {
            type: "map",
            geoIndex: 0, //指定geo组件
            data: this.cityData,
          },
        ],
      };
      // 绘制地图
      myChart.setOption(option);
      setTimeout(() => {
        myChart.hideLoading();
      }, 500);
      // 设置鼠标移入
      myChart.off('mouseover');
      myChart.on('mouseover',function(p){
        const evt = p.event;
        myChart.dispatchAction({ // 指令调用tooltip显示
          type: 'showTip',
          x: evt.offsetX,
          y: evt.offsetY,
          position: [evt.offsetX,evt.offsetY]
        });
      });
      myChart.off('globalout');
      myChart.on('globalout',function(p){
        myChart.dispatchAction({
          type: 'hideTip'
        });
      });
      // echarts点击事件
      myChart.on("click", (params) => {
        // 进入二级（点击哪个区就是哪个）
        console.log(params, 'params')

        if (this.cityMap[params.name]) {
          if (this.mapData != this.cityMap[params.name]) {
            this.mapData = this.cityMap[params.name];
            this.$echarts.registerMap(name, this.mapData);
            myChart.setOption(option, true);
          }
        }
        // 通过params.name去匹配this.chartList中的key,并赋值给this.chartData
        console.log(this.chartList, 'this.chartList')
        this.chartData = this.chartList.filter((item) => {
          return params.name.includes(item.city);
        });
        console.log(this.chartData, 'this.chartData')

        // 处理数据
        getTotal({
          city: params.name
        }).then(res => {
          this.barData = res;
          console.log(this.barData, 'barData')
          this.initChart2();
        })

        this.initChart();

      });
      myChart.getZr().on("click", (params) => {
        // echarts点击空白事件
        // 返回一级
        // console.log(this.mapData, 'mapData')
        // console.log(this.cityMap, 'cityMap')
        if (params.target == undefined) {
          this.mapData = this.cityMap["内蒙古自治区"];
          this.$echarts.registerMap(name, this.mapData);
          myChart.setOption(option, true);
        }
      });
    },
    initChart() {
      // 初始化图表
      const myChart = this.$echarts.init(document.getElementById("chart"));
      let option1 = {
        title: {text: ''},//图标的标题
        // X轴
        xAxis: {
          type: 'category',//坐标轴类型,类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据
          //坐标轴刻度相关设置
          axisTick: {
            alignWithLabel: true,//为true时，可以让刻度跟底部的标签内容对齐
          },
          data: this.chartData[0].days,//X轴的刻度数据
          name: "时间",//坐标轴名称
          nameLocation: "start",//坐标轴名称显示位置
          //坐标轴名称的文字样式
          nameTextStyle: {
            align: "center",//文字水平对齐方式，默认自动
            verticalAlign: "top",//文字垂直对齐方式，默认自动
            lineHeight: 28,//行高
            fontSize: 10,//字体大小
            color: "rgb(179, 239, 255)"//字体颜色
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            interval: 'auto',//坐标轴刻度标签的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签,如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示『隔两个标签显示一个标签』，以此类推。
            textStyle: {
              color: 'rgb(179, 239, 255)'//刻度标签的文字颜色
            }
          },
          //分割线配置
          splitLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            }
          },
          //x轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        // Y轴
        yAxis: {
          type: 'value',//坐标轴类型,'value' 数值轴，适用于连续数据
          //坐标轴刻度标签的相关设置
          axisLabel: {
            formatter: this.formatter,//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。简单讲就是可以自己格式化标签的内容。
            textStyle: {
              color: 'rgb(179, 239, 255)'//刻度标签的文字颜色
            }
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            }
          },
        },
        //直角坐标系内绘图网格,简单理解指的就是这个折线图。
        grid: {
          left: 50//grid 组件离容器左侧的距离
        },
        // 数据
        series: [
          {
            data: this.chartData[0].tem,//折线图要展示的数据
            type: 'line',//数据以什么样的类型展示。line为折线图
            itemStyle: {
              normal: {
                color: '#8df4f4', //改变折线点的颜色
                lineStyle: {
                  color: '#53D9FF' //改变折线颜色
                }
              }
            },
          }
        ]
      }

      myChart.setOption(option1,true)
    },
    initChart2() {
      // 初始化图表
      const myChart = this.$echarts.init(document.getElementById("chart2"));
      let option1 = {
        title: {text: ''},//图标的标题
        // X轴
        xAxis: {
          type: 'category',//坐标轴类型,类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据
          //坐标轴刻度相关设置
          axisTick: {
            alignWithLabel: true,//为true时，可以让刻度跟底部的标签内容对齐
          },
          data: this.barData.tem,//X轴的刻度数据
          name: "时间",//坐标轴名称
          nameLocation: "start",//坐标轴名称显示位置
          //坐标轴名称的文字样式
          nameTextStyle: {
            align: "center",//文字水平对齐方式，默认自动
            verticalAlign: "top",//文字垂直对齐方式，默认自动
            lineHeight: 28,//行高
            fontSize: 10,//字体大小
            color: "rgb(179, 239, 255)"//字体颜色
          },
          //坐标轴刻度标签的相关设置
          axisLabel: {
            interval: 'auto',//坐标轴刻度标签的显示间隔，在类目轴中有效。可以设置成 0 强制显示所有标签,如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示『隔两个标签显示一个标签』，以此类推。
            textStyle: {
              color: 'rgb(179, 239, 255)'//刻度标签的文字颜色
            }
          },
          //分割线配置
          splitLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            }
          },
          //x轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        // Y轴
        yAxis: {
          type: 'value',//坐标轴类型,'value' 数值轴，适用于连续数据
          min: 0,
          max: 30,
          //坐标轴刻度标签的相关设置
          axisLabel: {
            formatter: this.formatter,//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。简单讲就是可以自己格式化标签的内容。
            textStyle: {
              color: 'rgb(179, 239, 255)'//刻度标签的文字颜色
            }
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            }
          },
        },
        //直角坐标系内绘图网格,简单理解指的就是这个折线图。
        grid: {
          left: 50//grid 组件离容器左侧的距离
        },
        // 数据
        series: [
          {
            data: this.barData.days,//折线图要展示的数据
            type: 'bar',//数据以什么样的类型展示。line为折线图
            itemStyle: {
              normal: {
                color: '#8df4f4', //改变折线点的颜色
                lineStyle: {
                  color: '#53D9FF' //改变折线颜色
                }
              }
            },
            label:{
              show:true,
              position:'top',
              formatter:function(data){
                return data.value + '天'
              }
            }
          }
        ]
      }

      myChart.setOption(option1,true)
    },
  }
};
</script>

<!--<style>-->
<!--* {-->
<!--  -webkit-user-select: text !important;-->
<!--  user-select: text !important;-->
<!--}-->
<!--</style>-->

<style scoped lang="scss">
/* 天气弹窗整体样式 */
.weather-popup {
  box-sizing: border-box;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 6px;
}

/* 天气预报标题 */
.weather-popup-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* 天气信息主体容器 */
.weather-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  align-items: center;
}

/* 天气信息行样式 */
.weather-info > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 天气信息标签 */
.weather-info span.label {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.3rem;
}

/* 天气信息值 */
.weather-info span.value {
  font-size: 1rem;
  line-height: 1.5;
}

/* 空气质量信息单独一行 */
.air-quality-row {
  margin-top: 1rem; /* 与上一行保持一致的间隔 */
  text-align: center; /* 使空气质量信息居中显示 */
}

/* 空气质量信息标签 */
.air-quality-row span.air-label {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.3rem;
}

/* 空气质量信息值 */
.air-quality-row span.air-tips {
  font-size: 1rem;
  line-height: 1.5;
  word-break: break-word; /* 长文本换行 */
}

.container {
  width: 100%;
  height: 100%;
  background: url("../assets/bg1.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

#map {
  height: calc(100vh - 84px);
}

#chart {
  width: 500px;
  height: 50%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 996;
}

#chart2 {
  width: 500px;
  height: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 996;
}
</style>

